<template>
  <div
    v-if="$platform !== 'h5'"
    class="g-nav-bar"
  >
    <div class="status-bar" :style="{height: statusBarHeight + 'px'}" />
    <div class="nav-bar" :style="{height: height + 'px'}">
      <slot>
        <div class="nav-bar__icon">
          <van-icon name="arrow-left" @click="back" />
        </div>
        <span class="nav-bar__title">{{ title }}</span>
      </slot>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Taro from '@tarojs/taro'
import { Icon } from 'vant'
import './index.less'

export default Vue.extend({
  name: 'GNavBar',
  components: {
    [Icon.name]: Icon
  },
  props: {
    opacity: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      statusBarHeight: 20,
      height: 40
    }
  },
  created() {
    Taro.getSystemInfo({
      success: (res) => {
        const { statusBarHeight: _statusBarHeight, titleBarHeight, system } = res as any
        this.statusBarHeight = _statusBarHeight
        this.height = titleBarHeight
        if (!this.height) {
          this.height = system.toLowerCase().indexOf('ios') > -1 ? 40 : 48
        }
      }
    })
  },
  methods: {
    back() {
      Taro.navigateBack()
    }
  }
})
</script>
